<template>
	<view class="handleBox">
		<!-- <header-box :title="pageTitle"></header-box> -->
		<view class="handleBox-main">
			<view class="headleBox-main-title">
				<image class="headleBox-main-title-icon" src="../../static/img/decorate-left.png" mode=""></image>
				<view class="headleBox-main-title-txt">恭喜你获得</view>
				<image class="headleBox-main-title-icon" src="../../static/img/decorate-right.png" mode=""></image>
			</view>
			<view class="handleBox-main-list">
				
				        <view class="uni-padding-wrap">
				            <view class="page-section swiper">
				                <view class="page-section-spacing">
				                    <swiper class="swiper handleBox-swiper"  :autoplay="autoplay" :interval="interval" :duration="duration">
										<!-- 开一个盲盒没问问题 开多个盲盒有问题  -->
										<swiper-item class="handleBox-swiper-li" v-for="item,index in num" :key="index">
										   <view class="swiper_list">
											   <view class="swiper-item">
													<image class="handleBox-swiper-li-img" src="../../static/img/goods-img.png" mode=""></image>
											   </view>
											   <view class="handleBox-swiper-li-top"><text>童话筑梦，长信宫灯</text></view>
											   <view class="handleBox-swiper-li-bottom"><text>￥678.00</text></view>
										   </view>
										</swiper-item>

				                    </swiper>
				                </view>
				            </view>
				        </view> 				        
			</view>
			<view class="openBox-btnBox">
				<view class="openBox-btnBox-blues"><text>收下{{num}}个藏品</text></view>
			</view>
			<!-- <view class="handleBox-remarks">
				<view class="remarks">
					<text>注：如有多个盲盒，则一键开启，所有盲盒</text><br/>
					<text>左右滑动查看</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageTitle:'开盲盒',
				list1: [{
                    image: '../../static/img/goods-img.png',
                    title: '童话筑梦，长信宫灯',
					price:'355.00'
                },{
                    image: '../../static/img/goods-img.png',
                    title: '面对疾风吧，哈沙尅',
					price: '288.00'
                },{
                    image: '../../static/img/goods-img.png',
                    title: '你看见过我的小熊吗？',
					price: '888.88'
                }],
				// 轮播图测试代码
				background: ['color1', 'color2', 'color3'],
				autoplay: false,
				interval: 2000,
				duration: 500,
				num:1,	
			}
		},
		onLoad(option) {
			if (option.num) {
				this.num = Number(option.num);
			} else {
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods: {

		}
	}
</script>

<style lang="less">	
	.swiper_list{
		margin-right: 34rpx;
	}

	.handleBox{
		width: 100%;
		min-height: 100vh;
		background: #16181D;
		display: flow-root;
	}
	.handleBox-main{
		width: 100%;
		.headleBox-main-title{
			margin-top: 80rpx;
			margin-bottom: 64rpx;
			width: 100%;
			height: 66rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.headleBox-main-title-icon{
				width: 40rpx;
				height: 40rpx;
			}
			.headleBox-main-title-txt{
				margin: 0 16rpx;
				width: 240rpx;
				height: 66rpx;
				line-height: 66rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 66rpx;
				font-family: PingFangSC-Medium, PingFang SC, '微软雅黑';
			}
		}
		.openBox-btnBox{
			margin-top: 80rpx;
			width: 100%;
			// height: 88rpx;
			height: 100rpx;
			border-radius: 25px;
			display: flex;
			justify-content: center;
			.openBox-btnBox-blues{
				width: 231px;
				height: 88rpx;
				line-height: 88rpx;
				background: linear-gradient(223deg, #A339D8 0%, #6948F2 100%);
				border-radius: 25px;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 2px;
			}
		}
		.handleBox-remarks{
			margin-top: 44rpx;
			width: 100%;
			height: 80rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FF6969;
			line-height: 40rpx;
			font-size: 14px;
			display: flex;
			justify-content: center;
			align-items: center;
			.remarks{	
				width: 532rpx;
				height: 80rpx;	
			}
		}
	}
	.handleBox-main-list{
		width: 100%;
		height: 710rpx;	
		.handleBox-swiper{
			height: 710rpx;
			width: 100%;
			background: #16181D;
			.handleBox-swiper-li{
				margin:0 110rpx;
				text-align: center;
				height: 710rpx;
				width: 80% !important;
				overflow: hidden;
				letter-spacing: 2px;
				.swiper_list{
					width:548rpx ;
					background-color: #262A34;
					border-radius: 16px;
					height: 710rpx;
					background-color: #262A34;
				}
				.handleBox-swiper-li-img{
					width: 548rpx;
					height: 548rpx;
					border-radius: 16px;
				}
				.handleBox-swiper-li-top{
					width: 100%;
					margin-top: 18rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC,'微软雅黑';
					color: #FFFFFF;
					font-weight: 400;
				}
				.handleBox-swiper-li-bottom{
					width: 100%;
					margin-top: 16rpx;
					height: 40rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Medium, PingFang SC,'微软雅黑';
					font-weight: 500;
					color: #FFFFFF;
					line-height: 40rpx;
				}
				
			}
		}
	}

	// 修改swiper默认样式

</style>
